<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js-booster 工具库测试</title>
    <script src="https://unpkg.com/mahmud-js-tools@1.0.11/dist/index.js"></script>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
        line-height: 1.6;
        color: #333;
        background-color: #f5f7fa;
      }
      h1 {
        color: #2c3e50;
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid #3498db;
        padding-bottom: 10px;
      }
      .function-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
      }
      .function-title {
        color: #3498db;
        margin-top: 0;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 10px;
      }
      pre {
        background-color: #f8f9fa;
        padding: 12px;
        border-radius: 5px;
        overflow-x: auto;
        font-size: 14px;
        border-left: 4px solid #3498db;
      }
      button {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .result {
        margin-top: 15px;
        padding: 12px;
        background-color: #e8f4fc;
        border-radius: 5px;
        border-left: 4px solid #3498db;
        font-family: monospace;
        white-space: pre-wrap;
      }
      .function-description {
        color: #555;
        margin-bottom: 15px;
      }
      #container {
        height: 500px;
        border: 1px solid #eee;
        margin-bottom: 20px;
      }
    </style>
</head>
<body>
    <h1>js-booster 工具库测试</h1>


    <!-- 1. random -->
    <div class="function-card">
      <h2 class="function-title">1. random - 随机数生成</h2>
      <p class="function-description">生成指定范围内的随机整数。</p>
      <pre>
const randomNum = JsBooster.random(1, 100);
console.log('随机数:', randomNum);</pre>
      <button onclick="runRandom()">生成随机数</button>
      <div id="randomResult" class="result"></div>
    </div>

    <!-- 2. debounce -->
    <div class="function-card">
      <h2 class="function-title">2. debounce - 防抖函数</h2>
      <p class="function-description">在频繁触发的事件中，只在停止触发后执行一次。</p>
      <pre>
const debouncedFn = JsBooster.debounce(() => {
    console.log('防抖函数执行');
}, 500);

document.getElementById('debounceTestBtn').addEventListener('click', debouncedFn);</pre>
      <button id="debounceTestBtn">快速点击我测试防抖</button>
      <p>查看控制台输出结果</p>
    </div>

    <!-- 3. throttle -->
    <div class="function-card">
      <h2 class="function-title">3. throttle - 节流函数</h2>
      <p class="function-description">在频繁触发的事件中，按固定频率执行。</p>
      <pre>
const throttledFn = JsBooster.throttle(() => {
    console.log('节流函数执行');
}, 500);

document.getElementById('throttleTestBtn').addEventListener('click', throttledFn);</pre>
      <button id="throttleTestBtn">快速点击我测试节流</button>
      <p>查看控制台输出结果</p>
    </div>

    <!-- 4. deepClone -->
    <div class="function-card">
      <h2 class="function-title">4. deepClone - 深拷贝对象</h2>
      <p class="function-description">创建一个对象的完全独立副本，包括嵌套对象。</p>
      <pre>
const original = { a: 1, b: { c: 2 } };
const cloned = JsBooster.deepClone(original);
cloned.b.c = 3;
console.log('原始对象:', original);
console.log('修改后的克隆对象:', cloned);</pre>
      <button onclick="runDeepClone()">运行示例</button>
      <div id="deepCloneResult" class="result"></div>
    </div>

    <!-- 5. cloneArray -->
    <div class="function-card">
      <h2 class="function-title">5. cloneArray - 数组浅拷贝</h2>
      <p class="function-description">创建一个数组的浅拷贝。</p>
      <pre>
const arr = [1, 2, { a: 3 }];
const clonedArr = JsBooster.cloneArray(arr);
clonedArr[0] = 99;
console.log('原始数组:', arr);
console.log('修改后的克隆数组:', clonedArr);</pre>
      <button onclick="runCloneArray()">运行示例</button>
      <div id="cloneArrayResult" class="result"></div>
    </div>

    <!-- 6. isEqual -->
    <div class="function-card">
      <h2 class="function-title">6. isEqual - 对象比较</h2>
      <p class="function-description">深度比较两个对象是否相等。</p>
      <pre>
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log('obj1 == obj2:', JsBooster.isEqual(obj1, obj2));
console.log('obj1 == obj3:', JsBooster.isEqual(obj1, obj3));</pre>
      <button onclick="runIsEqual()">运行示例</button>
      <div id="isEqualResult" class="result"></div>
    </div>

    <!-- 7. formatTime -->
    <div class="function-card">
      <h2 class="function-title">7. formatTime - 时间格式化</h2>
      <p class="function-description">将时间戳格式化为可读字符串。</p>
      <pre>
const now = Date.now();
const formatted = JsBooster.formatTime(now);
const customFormat = JsBooster.formatTime(now, 'YYYY年MM月DD日 HH:mm');

console.log('默认格式:', formatted);
console.log('自定义格式:', customFormat);</pre>
      <button onclick="runFormatTime()">运行示例</button>
      <div id="formatTimeResult" class="result"></div>
    </div>

    <!-- 8. isUrl -->
    <div class="function-card">
      <h2 class="function-title">8. isUrl - URL验证</h2>
      <p class="function-description">验证字符串是否为有效的URL。</p>
      <pre>
const url1 = 'https://google.com';
const url2 = 'not-a-url';

console.log(url1, '是URL吗?', JsBooster.isUrl(url1));
console.log(url2, '是URL吗?', JsBooster.isUrl(url2));</pre>
      <button onclick="runIsUrl()">运行示例</button>
      <div id="isUrlResult" class="result"></div>
    </div>

    <!-- 9. unique -->
    <div class="function-card">
      <h2 class="function-title">9. unique - 数组去重</h2>
      <p class="function-description">去除数组中的重复项。</p>
      <pre>
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = JsBooster.unique(arr);

console.log('原始数组:', arr);
console.log('去重后数组:', uniqueArr);</pre>
      <button onclick="runUnique()">运行示例</button>
      <div id="uniqueResult" class="result"></div>
    </div>

    <!-- 10. capitalize -->
    <div class="function-card">
      <h2 class="function-title">10. capitalize - 首字母大写</h2>
      <p class="function-description">将字符串的首字母转为大写。</p>
      <pre>
const str1 = 'hello world';
const str2 = 'javascript';

console.log(JsBooster.capitalize(str1)); // "Hello world"
console.log(JsBooster.capitalize(str2)); // "Javascript"</pre>
      <button onclick="runCapitalize()">运行示例</button>
      <div id="capitalizeResult" class="result"></div>
    </div>

    <!-- 11. camelCase -->
    <div class="function-card">
      <h2 class="function-title">11. camelCase - 驼峰命名</h2>
      <p class="function-description">将连字符字符串转为驼峰命名。</p>
      <pre>
const str1 = 'hello-world';
const str2 = 'user-name';

console.log(JsBooster.camelCase(str1)); // "helloWorld"
console.log(JsBooster.camelCase(str2)); // "userName"</pre>
      <button onclick="runCamelCase()">运行示例</button>
      <div id="camelCaseResult" class="result"></div>
    </div>

    <!-- 12. shuffle -->
    <div class="function-card">
      <h2 class="function-title">12. shuffle - 数组洗牌</h2>
      <p class="function-description">随机打乱数组顺序。</p>
      <pre>
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const shuffled = JsBooster.shuffle(arr);

console.log('原始数组:', arr);
console.log('打乱后数组:', shuffled);</pre>
      <button onclick="runShuffle()">运行示例</button>
      <div id="shuffleResult" class="result"></div>
    </div>

    <!-- 13. sleep -->
    <div class="function-card">
      <h2 class="function-title">13. sleep - 异步延迟</h2>
      <p class="function-description">创建一个延迟执行的Promise。</p>
      <pre>
async function demo() {
    console.log('开始等待...');
    await JsBooster.sleep(1000);
    console.log('1秒后执行');
}

demo();</pre>
      <button onclick="runSleep()">运行示例</button>
      <div id="sleepResult" class="result"></div>
    </div>

    <!-- 14. VirtualScroll -->
    <div class="function-card">
      <h2 class="function-title">14. VirtualScroll - 虚拟滚动</h2>
      <p class="function-description">高性能虚拟滚动组件。</p>
      <pre>
const data = Array.from({ length: 10000 }, (_, i) => ({ id: i, name: `Item ${i}` }));

const virtualScroll = new JsBooster.VirtualScroll({
    container: document.getElementById('container'),
    items: data,
    itemHeight: 40,
    renderItem: (item) => {
        const div = document.createElement('div');
        div.textContent = `${item.id}: ${item.name}`;
        div.style.height = '40px';
        div.style.borderBottom = '1px solid #eee';
        return div;
    }
});</pre>
      <button onclick="initVirtualScroll()">初始化VirtualScroll</button>
    </div>
    <div id="container"></div>

    <script>
      // 1. random 示例
      function runRandom() {
        const randomNum = JsBooster.random(1, 100);
        document.getElementById("randomResult").textContent = `生成的随机数 (1-100): ${randomNum}`;
      }

      // 2. debounce 示例
      const debouncedFn = JsBooster.debounce(() => {
        console.log("防抖函数执行 - 实际只在最后一次点击后500ms执行一次");
      }, 500);
      document.getElementById("debounceTestBtn").addEventListener("click", debouncedFn);

      // 3. throttle 示例
      const throttledFn = JsBooster.throttle(() => {
        console.log("节流函数执行 - 每500ms最多执行一次");
      }, 500);
      document.getElementById("throttleTestBtn").addEventListener("click", throttledFn);

      // 4. deepClone 示例
      function runDeepClone() {
        const original = { a: 1, b: { c: 2 } };
        const cloned = JsBooster.deepClone(original);
        cloned.b.c = 3;
        
        const result = `原始对象: ${JSON.stringify(original, null, 2)}
修改后的克隆对象: ${JSON.stringify(cloned, null, 2)}`;
        document.getElementById("deepCloneResult").textContent = result;
      }

      // 5. cloneArray 示例
      function runCloneArray() {
        const arr = [1, 2, { a: 3 }];
        const clonedArr = JsBooster.cloneArray(arr);
        clonedArr[0] = 99;
        
        const result = `原始数组: ${JSON.stringify(arr, null, 2)}
修改后的克隆数组: ${JSON.stringify(clonedArr, null, 2)}`;
        document.getElementById("cloneArrayResult").textContent = result;
      }

      // 6. isEqual 示例
      function runIsEqual() {
        const obj1 = { a: 1, b: { c: 2 } };
        const obj2 = { a: 1, b: { c: 2 } };
        const obj3 = { a: 1, b: { c: 3 } };

        const result = `obj1 == obj2: ${JsBooster.isEqual(obj1, obj2)}
obj1 == obj3: ${JsBooster.isEqual(obj1, obj3)}`;
        document.getElementById("isEqualResult").textContent = result;
      }

      // 7. formatTime 示例
      function runFormatTime() {
        const now = Date.now();
        const formatted = JsBooster.formatTime(now);
        const customFormat = JsBooster.formatTime(now, "YYYY年MM月DD日 HH:mm");

        const result = `默认格式: ${formatted}
自定义格式: ${customFormat}`;
        document.getElementById("formatTimeResult").textContent = result;
      }

      // 8. isUrl 示例
      function runIsUrl() {
        const url1 = "https://google.com";
        const url2 = "not-a-url";

        const result = `"${url1}" 是URL吗? ${JsBooster.isUrl(url1)}
"${url2}" 是URL吗? ${JsBooster.isUrl(url2)}`;
        document.getElementById("isUrlResult").textContent = result;
      }

      // 9. unique 示例
      function runUnique() {
        const arr = [1, 2, 2, 3, 4, 4, 5];
        const uniqueArr = JsBooster.unique(arr);

        const result = `原始数组: [${arr.join(", ")}]
去重后数组: [${uniqueArr.join(", ")}]`;
        document.getElementById("uniqueResult").textContent = result;
      }

      // 10. capitalize 示例
      function runCapitalize() {
        const str1 = "hello world";
        const str2 = "javascript";

        const result = `"${str1}" → "${JsBooster.capitalize(str1)}"
"${str2}" → "${JsBooster.capitalize(str2)}"`;
        document.getElementById("capitalizeResult").textContent = result;
      }

      // 11. camelCase 示例
      function runCamelCase() {
        const str1 = "hello-world";
        const str2 = "user-name";

        const result = `"${str1}" → "${JsBooster.camelCase(str1)}"
"${str2}" → "${JsBooster.camelCase(str2)}"`;
        document.getElementById("camelCaseResult").textContent = result;
      }

      // 12. shuffle 示例
      function runShuffle() {
        const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        const shuffled = JsBooster.shuffle([...arr]);

        const result = `原始数组: [${arr.join(", ")}]
打乱后数组: [${shuffled.join(", ")}]`;
        document.getElementById("shuffleResult").textContent = result;
      }

      // 13. sleep 示例
      async function runSleep() {
        const resultEl = document.getElementById("sleepResult");
        resultEl.textContent = "开始等待1秒...";

        const start = Date.now();
        await JsBooster.sleep(1000);
        const end = Date.now();

        resultEl.textContent = `等待完成! 实际等待时间: ${end - start}毫秒`;
      }

      // 14. VirtualScroll 示例
      function initVirtualScroll() {
        const data = Array.from({ length: 10000 }, (_, i) => ({
          id: i,
          name: `Item ${i}`,
        }));

        new JsBooster.VirtualScroll({
          container: document.getElementById("container"),
          items: data,
          itemHeight: 40,
          renderItem: (item) => {
            const div = document.createElement("div");
            div.textContent = `${item.id}: ${item.name}`;
            div.style.height = "40px";
            div.style.borderBottom = "1px solid #eee";
            return div;
          },
        });
      }
    </script>
</body>
</html>